<template>
  <a-modal
    :title="form && form.id ? '修改用户' : '新建用户'"
    centered
    width="60vw"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="username" label="账号" prop="username">
              <a-input :disabled="disabled" placeholder="请输入账号" v-model="form.username"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="password" label="密码" prop="password">
              <a-input :disabled="disabled" :maxLength="20" placeholder="默认：123456" v-model="form.password"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="nickName" label="昵称" prop="nickName">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请输入昵称" v-model="form.nickName"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="no" label="员工号" prop="no">
              <a-input :disabled="disabled" placeholder="请输入员工号" v-model="form.no"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="phone" label="身份证号" prop="phone">
              <a-input :disabled="disabled" :maxLength="19" placeholder="请输入身份证号" v-model="form.id_card"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="phone" label="手机号" prop="phone">
              <a-input :disabled="disabled" :maxLength="11"  placeholder="请输入手机号" v-model="form.phone"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="name" label="真实姓名" prop="name">
              <a-input :disabled="disabled" placeholder="请输入真实姓名" v-model="form.name"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="age" label="年龄" prop="age">
              <a-input-number class="sort" :maxLength="3" :disabled="disabled" placeholder="请输入年龄" v-model="form.age" :min="1" :max="100"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="dept_id" label="部门" prop="dept_id">
              <a-tree-select
                :disabled="disabled"
                placeholder="请选择部门"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
                v-model="form.dept_id"
                :tree-data="deptList"
                tree-default-expand-all
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="post_id" label="岗位" prop="post_id">
              <a-select :disabled="disabled" placeholder="请选择岗位" v-model="form.post_id">
                <template v-for="item in postList">
                  <a-select-option :value="item.id" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="entry_time" label="入职时间" prop="entry_time">
              <a-date-picker class="full" v-model="form.entry_time" placeholder="请输入入职时间" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="formal_time" label="转正时间" prop="formal_time">
              <a-date-picker class="full" v-model="form.formal_time" placeholder="请输入转正时间" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="leave_time" label="离职时间" prop="leave_time">
              <a-date-picker class="full" v-model="form.leave_time" placeholder="请输入离职时间" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="money" label="薪资" prop="money">
              <a-input-number class="sort" :disabled="disabled" placeholder="请输入薪资" v-model="form.money" :min="1" :max="100000000"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="sex" label="性别" prop="sex">
              <custom-select :disabled="disabled" dictKey="sex" pl="请选择性别" :values="form.sex" @change="handleChange($event, 1)"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">

          <a-col :span="8">
            <a-form-model-item ref="email" label="邮箱" prop="email">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请选择邮箱" v-model="form.email"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="status" label="用户状态" prop="status">
              <a-radio-group :disabled="disabled" v-model="form.status">
                <a-radio value="0">
                  启用
                </a-radio>
                <a-radio value="1">
                  停用
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="role_id" label="角色" prop="role_id">
              <a-select :disabled="disabled" placeholder="请选择角色" mode="multiple" v-model="form.role_id" allowClear>
                <template v-for="item in treeData">
                  <a-select-option :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="education" label="学历" prop="education">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请输入学历" v-model="form.education"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="birthday" label="生日" prop="birthday">
              <a-date-picker :disabled="disabled" placeholder="请选择生日" v-model="form.birthday" style="width: 100%;"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="stature" label="身高" prop="stature">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请输入身高" v-model="form.stature"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-model-item ref="nation" label="民族" prop="nation">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请输入民族" v-model="form.nation"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="marriage" label="生日" prop="marriage">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请输入婚姻" v-model="form.marriage"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="address" label="住址" prop="address">
              <a-input :disabled="disabled" :maxLength="50" placeholder="请输入住址" v-model="form.address"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
           <a-form-model-item ref="native_place" label="籍贯" prop="native_place">
              <a-input :disabled="disabled" placeholder="请输入籍贯" v-model="form.native_place"/>
            </a-form-model-item>
            </a-col>
          <a-col :span="8">
            <a-form-model-item ref="student_number" label="照片" prop="student_number">
              <a-upload
                :disabled="disabled"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="beforeUpload"
              >
                <img class="avatar" v-if="form.avatar" :src="formatAvatar(form.avatar)" alt="avatar"/>
                <div v-else>
                  <div class="ant-upload-text">
                    照片
                  </div>
                </div>
              </a-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item ref="contract" label="电子合同" prop="contract">
              <a-upload
                :disabled="disabled"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="beforeContractUpload"
              >
                <img class="avatar" v-if="form.contract" :src="formatAvatar(form.contract)" alt="contract"/>
                <div v-else>
                  <div class="ant-upload-text">
                    电子合同
                  </div>
                </div>
              </a-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {getList} from '@/api/role'
import {getList as getDept} from '@/api/dept'
import {getList as getPost} from '@/api/post'
import clonedeep from 'lodash.clonedeep'
import CustomSelect from "@/components/CustomSelect";
import {upload} from "@/api/common";
export default {
  components: {CustomSelect},
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 17}
      }
    }
    return {
      treeData: [],
      deptList: [],
      postList: [],
      form: {
        id: undefined,
        username: undefined,
        password: undefined,
        nickName: undefined,
        stature: undefined,
        phone: undefined,
        stature: undefined,
        name: undefined,
        nation: undefined,
        marriage: undefined,
        address: undefined,
        avatar: undefined,
        sex: undefined,
        email: undefined,
        education: undefined,
        birthday: undefined,
        role_id: undefined,
        id_card: undefined,
        status: "0",
        no: undefined,
        age: undefined,
        native_place: undefined,
        dept_id: undefined,
        post_id: undefined,
        entry_time: undefined,
        formal_time: undefined,
        leave_time: undefined,
        money: undefined,
        contract: undefined,
      },
      disabled: false,
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        nickName: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        // email: [
        //   {required: true, message: '请输入邮箱', trigger: 'blur'},
        // ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
      this.form.dept_id = !this.form.dept_id || this.form.dept_id === 0 ? undefined : this.form.dept_id
      this.form.post_id = !this.form.post_id || this.form.post_id === 0 ? undefined : this.form.post_id
      this.form.age = !this.form.age ? undefined : this.form.age
      this.form.sex = !this.form.sex ? undefined : this.form.sex
      this.form.education = !this.form.education ? undefined : this.form.education
    })
    this.$watch('visible', () => {
      this.getMenuList()
      this.getDeptList()
      this.getPostList()
    })
  },
  methods: {
    formatAvatar(e) {
      if (e) {
        return this.$staticPrefix(e);
      }
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const data = clonedeep(this.form)
          data.status = data.status ? data.status : '0'
          data.role_id = data.role_id ? data.role_id.join(',') : ''
          // data.password = data.password ? md5(data.password) : md5('123456')
          this.$emit('ok', data)
        } else {
          return false;
        }
      });
    },
    beforeUpload(e) {
      const formatData = new FormData()
      formatData.append('file', e.file)
      upload(formatData).then(ret => {
        if (ret.success) {
          formatData.delete('file');
          this.form = {
            ...this.form,
            avatar: ret.data
          }
        }
      })
    },
    beforeContractUpload(e) {
      const formatData = new FormData()
      formatData.append('file', e.file)
      upload(formatData).then(ret => {
        if (ret.success) {
          formatData.delete('file');
          this.form = {
            ...this.form,
            contract: ret.data
          }
        }
      })
    },
    getMenuList() {
      getList().then(ret => {
        this.treeData = ret.data.result
      })
    },
    getDeptList() {
      getDept().then(ret => {
        this.deptList = ret.data
      })
    },
    getPostList() {
      getPost().then(ret => {
        this.postList = ret.data.result
      })
    },
    resetFields() {
      this.$refs.ruleForm.resetFields()
      this.form = {
        id: undefined,
        username: undefined,
        password: undefined,
        nickName: undefined,
        phone: undefined,
        avatar: undefined,
        sex: undefined,
        stature: undefined,
        name: undefined,
        nation: undefined,
        marriage: undefined,
        address: undefined,
        email: undefined,
        education: undefined,
        birthday: undefined,
        role_id: undefined,
        id_card: undefined,
        status: "1",
        no: undefined,
        age: undefined,
        native_place: undefined,
        dept_id: undefined,
        post_id: undefined,
        entry_time: undefined,
        formal_time: undefined,
        leave_time: undefined,
        money: undefined,
        contract: undefined,
      }
    },
    handleChange(e, index) {
      if (index === 1) {
        this.form.sex = e;
      } else if (index === 2) {
        this.form.status = e;
      } else {
        this.form.education = e;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.avatar {
  width: 102px;
  height: 102px;
  object-fit: cover
}
</style>
